<template>
  <div class="pieChartx-Box">
    <div ref="pieChart" :style="{ width: '300px', height: '300px' }"></div>
  </div>
</template>

<script lang='ts' setup>
import * as echarts from 'echarts';
import { ref } from 'vue'
import api from '@/api'
//居民数据
let genderList = ref()
let nan = ref<number>(0)
let nv = ref<number>(0)
let weizhi = ref<number>(0)
let datagender = ref()
let residentsum = ref<number>(0)
//页面默认信息
const postAllBasicResidentBySearch = async () => {
  const result = await api.Mdatastatistics.postAllBasicResidentBySearchApi()
  // console.log("年龄", result);
  genderList.value = result.data.data
  genderdemo()


}
postAllBasicResidentBySearch()
// setTimeout(() => {
//   residentsum.value = nan.value + nv.value + weizhi.value;
//   datagender.value = [
//     { no: 1, value: nan.value, name: `男`, ratio: (nan.value / residentsum.value) * 100 + "%" },
//     { no: 2, value: nv.value, name: `女`, ratio: nv.value / residentsum.value * 100 + "%" },
//     { no: 3, value: weizhi.value, name: `未知`, ratio: weizhi.value / residentsum.value * 100 + "%" },
//     { no: "合计", value: residentsum.value, name: ``, ratio: residentsum.value / residentsum.value }
//   ]
//   initPieEcharts()
// }, 1000)
//获取性别数据
function genderdemo() {
  nan.value = 0
  nv.value = 0
  weizhi.value = 0
  genderList.value.forEach((item: any) => {
    // console.log('item', item.gender);
    if (item.gender === 0) {
      nan.value++
    } else if (item.gender === 1) {
      nv.value++
    } else {
      weizhi.value++
    }
  });
  aaa()

}

const aaa = () => {
  residentsum.value = nan.value + nv.value + weizhi.value;
  datagender.value = [
    { no: 1, value: nan.value, name: `男`, ratio: (nan.value / residentsum.value) * 100 + "%" },
    { no: 2, value: nv.value, name: `女`, ratio: nv.value / residentsum.value * 100 + "%" },
    { no: 3, value: weizhi.value, name: `未知`, ratio: weizhi.value / residentsum.value * 100 + "%" },
    { no: "合计", value: residentsum.value, name: `-`, ratio: residentsum.value / residentsum.value }
  ]
  initPieEcharts()
}


//绘制饼图
const pieChart = ref<HTMLElement>();
const myChart2 = ref<any>();
function initPieEcharts() {
  myChart2.value = echarts.init(pieChart.value!)
  myChart2.value.setOption({
    title: {
      text: '居民性别构成',
      x: 'left'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '85%',
      left: 'left',
      icon: 'circle'
    },
    series: [
      {
        name: '居民数量',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['50%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          normal: {
            show: true,
            position: 'center',
            formatter: `居民总数 ${residentsum.value}`
          },
          emphasis: {
            show: true,
          }

        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: '400'
          }
        },
        labelLine: {
          show: false
        },
        data: datagender.value.filter((item: any) => item.no !== '合计')
      }
    ]
  })
}


</script>

<style lang='scss' scoped>
.pieChartx-Box {
  border: 1px solid #eee;
  width: 300px;
  height: 300px;
  border-radius: 6px;
  margin: 20px 0;
  padding: 20px;
}
</style>